<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>用户</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/plugin/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="jQueryMsg/css/message.css">

    <style>
        .table td, .table th {
            padding: 0.25rem !important;
        }

        .fixed-table-container tbody td, .fixed-table-container thead th {
            padding: 0px;
        }
    </style>

</head>
<body style="min-width: 555px">
<div class="wrapper">
    <div class="main-header">

        <!--logo-->
        <div class="logo-header">
            <a href="index.html" class="logo">
                教学实训管理系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">

                <!--用户管理-->
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-bell"></i>
                            <span id="messageLen" class="notification" style="display: none"></span>
                        </a>
                        <ul id="dialogueMessage" class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">

                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="userName1"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <a id="resetPass" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> 修改密码</a>
                            <a id="logout" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> Logout</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="sidebar-wrapper">

            <!--左侧导航-->
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>home</p>
                        <!--<span class="badge badge-count">5</span>-->
                    </a>
                </li>
                <li id="1" style="display: none" class="nav-item active">
                    <a href="user.html">
                        <i class="la la-table"></i>
                        <p>用户</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
                <li id="2" style="display: none" class="nav-item">
                    <a href="role.html">
                        <i class="la la-keyboard-o"></i>
                        <p>角色</p>
                        <!--<span class="badge badge-count">50</span>-->
                    </a>
                </li>
                <li id="3" style="display: none" class="nav-item">
                    <a href="questions.html">
                        <i class="la la-th"></i>
                        <p>留言</p>
                        <!--<span class="badge badge-count">6</span>-->
                    </a>
                </li>
                <li id="4" style="display: none" class="nav-item">
                    <a href="submission.html">
                        <i class="la la-bell"></i>
                        <p>日记记录</p>
                        <!--<span class="badge badge-success">3</span>-->
                    </a>
                </li>
                <li id="5" style="display: none" class="nav-item">
                    <a href="audit.html">
                        <i class="la la-font"></i>
                        <p>日记审核</p>
                        <span id="diaryLen" class="badge badge-danger"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--main-->
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">用户</h4>
                <!--表格-->
                <div class="row" style="margin-bottom: 2%">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header" style="margin-top: 1%">
                                <button id="batchDeletion" class="btn btn-default btn-sm"
                                        style="float: right;margin-left: 1%">批量删除
                                </button>
                                <button onclick="resetForm()" class="btn btn-default btn-sm" style="float: right;"
                                        data-toggle="modal" data-target="#addModel">新增
                                </button>
                                <!--搜索-->
                                <form class="navbar-left navbar-form nav-search mr-md-3" action="" style="float: right">
                                    <div class="input-group">
                                        <input id="search" type="text" placeholder="用户名..." class="form-control">
                                        <div class="input-group-append">
								<span class="input-group-text">
									<i id="searchBtn" class="la la-search search-icon"></i>
								</span>
                                        </div>
                                    </div>
                                </form>
                                <h4 class="card-title">用户 Table</h4>
                            </div>
                            <div class="card-body">
                                <table id="table" class="table table-hover">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                反馈
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                帮助
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    2018.11.21
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="addModel">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="addModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="userName">用户名</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userName" placeholder="请输入用户名..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="roleId">角色名</label>
                        <div class="col-sm-9">
                            <select id="roleId" class="form-control" style="width: 66%"></select>
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="userEmail">邮箱</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userEmail" placeholder="请输入邮箱..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="userPhone">手机号</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userPhone" placeholder="请输入手机号..." autocomplete="off">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="resetForm()" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addBtn" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="deleteModel">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="deleteModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                确认要删除吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="deleteBtn" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="oldPass">旧密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="oldPass" placeholder="旧密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPass">新密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPass" placeholder="新密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPassTwo">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPassTwo" placeholder="确认密码..." autocomplete="off">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="setPass" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="jQueryMsg/js/message.js"></script>
<script>
    var token;
    $(function () {
        // debugger
        token = sessionStorage.getItem('token')
        var oTable = new TableInit();
        oTable.Init();
        getPower()
        dialogueMessage()
        audit();
        roleSelect();
    })
        var TableInit = function () {
            var oTableInit = new Object();
            oTableInit.Init = function () {
                //初始化Table
                $('#table').bootstrapTable({
                    url: 'http://localhost:8080/oa/t-user/listUser?token='+token,
                    type: "GET",
                    sidePagination: "client",
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 5,
                    pageList: [5, 10, 25, 50, 100],
                    height: 350,
                    formatNoMatches: function(){
                        return "没有相关的匹配结果";
                    },
                    formatLoadingMessage: function(){
                        return "请稍等，正在加载中。。。";
                    },
                    responseHandler:function(res){
                        if (res.code == 401) {
                            window.location.href = 'login.html'
                        }else {
                            for (var i = 0 ;i < res.data.length ; i++) {
                                if (res.data[i].userState == 0) {
                                    res.data[i].userState = "停用"
                                }else{
                                    res.data[i].userState = "启用"
                                }
                            }
                        }
                        return res;
                    },
                    columns: [{
                        checkbox: true,
                        visible: true
                    }, {
                        field: 'userName',
                        title: '用户名',
                        align: 'center'
                    }, {
                        field: 'roleId',
                        title: '角色',
                        align: 'center'
                    }, {
                        field: 'userEmail',
                        title: '邮箱',
                        align: 'center'
                    }, {
                        field: 'userPhone',
                        title: '电话',
                        align: 'center'
                    }, {
                        field: 'createTime',
                        title: '创建时间',
                        align: 'center'
                    }, {
                        field: 'userState',
                        title: '状态',
                        align: 'center'
                    }, {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        events: operateEvents,
                        formatter: operateFormatter //自定义方法，添加操作按钮
                    }]
                });
            }
            return oTableInit;
        };
    function operateFormatter(value, row, index) {//赋予的参数
        if (row.roleId == "管理员"){
            return [
                '<button disabled="disabled" class="enableOrDisable btn btn-default btn-xs" style="margin: 0 5px 0 5px")">启/停用</button>',
                '<button class="editUser btn btn-default btn-xs" style="margin: 0 5px 0 5px")">编辑</button>',
                '<button disabled="disabled" class="resetPass btn btn-default btn-xs" style="margin: 0 5px 0 5px")">重置密码</button>',
                '<button disabled="disabled" class="deleteUser btn btn-default btn-xs" style="margin: 0 5px 0 5px">删除</button>',
            ].join('');
        }
        return [
            '<button class="enableOrDisable btn btn-default btn-xs" style="margin: 0 5px 0 5px")">启/停用</button>',
            '<button class="editUser btn btn-default btn-xs" style="margin: 0 5px 0 5px")">编辑</button>',
            '<button class="resetPass btn btn-default btn-xs" style="margin: 0 5px 0 5px")">重置密码</button>',
            '<button class="deleteUser btn btn-default btn-xs" style="margin: 0 5px 0 5px">删除</button>',
        ].join('');
    }
    window.operateEvents = {
        //启用或停用
        'click .enableOrDisable': function (e, value, row, index) {
            var param = {
                userId:row.id
            }
            $.ajax({
                url: 'http://localhost:8080/oa/t-user/updateState',
                type: "POST",
                data: param,
                dataType: "json",
                headers: {
                    token: "" + token
                },
                success: function (data) {
                    if (data.code == 200){
                        $.message(data.msg);
                    }else if (data.code == 401) {
                        window.location.href = 'login.html'
                    }else {
                        $.message({
                            message:data.msg,
                            type:'error'
                        });
                    }
                    $('#table').bootstrapTable('refresh');
                }
            })
        },
        'click .editUser': function (e, value, row, index) {
            $('#addModel').modal('show')
            $.ajax({
                url: 'http://localhost:8080/oa/t-role/listRole?token='+token,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    if (data.code == 200){
                        var data = data.data
                        $('#roleId').empty();
                        var html = "";
                        html += '<option value="">请选择角色...</option>\n'
                        for (var i = 0; i < data.length; i++) {
                            if (row.roleId == data[i].roleName){
                                html += '<option value="'+data[i].roleId+'" selected="selected">'+data[i].roleName+'</option>\n'
                            }else{
                                html += '<option value="'+data[i].roleId+'">'+data[i].roleName+'</option>\n'
                            }
                        }
                        $('#roleId').append(html)
                    }else if (data.code == 401) {
                        window.location.href = 'login.html'
                    }else {
                        $.message({
                            message:data.msg,
                            type:'error'
                        });
                    }
                }
            })
            $('#userName').val(row.userName)
            $('#roleId').val(row.roleId)
            $('#userEmail').val(row.userEmail)
            $('#userPhone').val(row.userPhone)
            $('#addBtn').unbind("click").on('click',function () {
                if ($('#userName').val().replace(/\s+/g, "") == "") {
                    $.message({
                        message:'请输入用户名',
                        type:'warning'
                    });
                    return;
                }
                if ($('#roleId').val()=="") {
                    $.message({
                        message:'请选择角色',
                        type:'warning'
                    });
                    return;
                }
                var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                if (!email.test($('#userEmail').val()) && $('#userEmail').val().replace(/\s+/g, "") != ""){
                    $.message({
                        message:'邮箱格式不正确',
                        type:'warning'
                    });
                    return;
                }
                var phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                if (!phone.test($('#userPhone').val()) && $('#userPhone').val().replace(/\s+/g, "") != ""){
                    $.message({
                        message:'手机号格式不正确',
                        type:'warning'
                    });
                    return;
                }
                var param = {
                    id:row.id,
                    userName:$('#userName').val(),
                    roleId:$('#roleId').val(),
                    userEmail:$('#userEmail').val(),
                    userPhone:$('#userPhone').val()
                }
                $.ajax({
                    url: 'http://localhost:8080/oa/t-user/updateUser',
                    type: "POST",
                    data: JSON.stringify(param),
                    dataType: "json",
                    headers: {
                        token: "" + token
                    },
                    contentType: 'application/json; charset=UTF-8',
                    success: function (data) {
                        if (data.code == 200){
                            $.message(data.msg);
                        }else if (data.code == 401) {
                            window.location.href = 'login.html'
                        }else {
                            $.message({
                                message:data.msg,
                                type:'error'
                            });
                        }
                        $('#table').bootstrapTable('refresh');
                        resetForm()
                        $('#addModel').modal('hide')
                    }
                })
            })
        },
        'click .resetPass': function (e, value, row, index) {
            var param = {
                userId:row.id
            }
            $.ajax({
                url: 'http://localhost:8080/oa/t-user/rePass',
                type: "POST",
                data: param,
                dataType: "json",
                headers: {
                    token: "" + token
                },
                success: function (data) {
                    if (data.code == 200){
                        $.message(data.msg);
                    }else if (data.code == 401) {
                        window.location.href = 'login.html'
                    }else {
                        $.message({
                            message:data.msg,
                            type:'error'
                        });
                    }
                    $('#table').bootstrapTable('refresh');
                }
            })
        },
        'click .deleteUser': function (e, value, row, index) {
            $('#deleteModel').modal('show')
            $('#deleteBtn').unbind("click").on('click',function () {
                var param = {
                    userId:row.id
                }
                $.ajax({
                    url: 'http://localhost:8080/oa/t-user/deleteUser',
                    type: "POST",
                    data: param,
                    dataType: "json",
                    headers: {
                        token: "" + token
                    },
                    success: function (data) {
                        if (data.code == 200){
                            $.message(data.msg);
                        }else if (data.code == 401) {
                            window.location.href = 'login.html'
                        }else {
                            $.message({
                                message:data.msg,
                                type:'error'
                            });
                        }
                        $('#table').bootstrapTable('refresh');
                        $('#deleteModel').modal('hide')
                    }
                })
            })
        },
    };
        $('#addBtn').on('click',function () {
            if ($('#userName').val().replace(/\s+/g, "") == "") {
                $.message({
                    message:'请输入用户名',
                    type:'warning'
                });
                return;
            }
            if ($('#roleId').val()=="") {
                $.message({
                    message:'请选择角色',
                    type:'warning'
                });
                return;
            }
            var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!email.test($('#userEmail').val()) && $('#userEmail').val().replace(/\s+/g, "") != ""){
                $.message({
                    message:'邮箱格式不正确',
                    type:'warning'
                });
                return;
            }
            var phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            if (!phone.test($('#userPhone').val()) && $('#userPhone').val().replace(/\s+/g, "") != ""){
                $.message({
                    message:'手机号格式不正确',
                    type:'warning'
                });
                return;
            }
            var param = {
                userName:$('#userName').val(),
                roleId:$('#roleId').val(),
                userEmail:$('#userEmail').val(),
                userPhone:$('#userPhone').val()
            }
            $.ajax({
                url: 'http://localhost:8080/oa/t-user/saveUser',
                type: "POST",
                data: JSON.stringify(param),
                dataType: "json",
                headers: {
                    token: "" + token
                },
                contentType: 'application/json; charset=UTF-8',
                success: function (data) {
                    if (data.code == 200){
                        $.message(data.msg);
                    }else if (data.code == 401) {
                        window.location.href = 'login.html'
                    }else {
                        $.message({
                            message:data.msg,
                            type:'error'
                        });
                    }
                    $('#table').bootstrapTable('refresh');
                    resetForm()
                    $('#addModel').modal('hide')
                }
            })
        })
    $('#batchDeletion').on('click',function () {
        var row = $('#table').bootstrapTable('getSelections')
        var str = ""
        for (var i = 0 ; i < row.length ; i++) {
            if (row[i].roleId != "管理员"){
                str += row[i].id+','
            }
        }
        $('#deleteModel').modal('show')
        $('#deleteBtn').unbind("click").on('click',function () {
            var param = {
                userId:str
            }
            $.ajax({
                url: 'http://localhost:8080/oa/t-user/deleteListUser',
                type: "POST",
                data: param,
                dataType: "json",
                headers: {
                    token: "" + token
                },
                success: function (data) {
                    if (data.code == 200){
                        $.message(data.msg);
                    }else if (data.code == 401) {
                        window.location.href = 'login.html'
                    }else {
                        $.message({
                            message:data.msg,
                            type:'error'
                        });
                    }
                    $('#table').bootstrapTable('refresh');
                    $('#deleteModel').modal('hide')
                }
            })
        })
    })
    function roleSelect() {
        $.ajax({
            url: 'http://localhost:8080/oa/t-role/listRole?token='+token,
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data.code == 200){
                    var data = data.data
                    $('#roleId').empty();
                    var html = "";
                    html += '<option value="">请选择角色...</option>\n'
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="'+data[i].roleId+'">'+data[i].roleName+'</option>\n'
                    }
                    $('#roleId').append(html)
                }else if (data.code == 401) {
                    window.location.href = 'login.html'
                }else {
                    $.message({
                        message:data.msg,
                        type:'error'
                    });
                }
            }
        })
    }
    function resetForm() {
            $('#userName').val(''),
            $('#roleId').val(''),
            $('#userEmail').val(''),
            $('#userPhone').val('')
    }
    $("#searchBtn").unbind('click').on('click',function () {
        var keyword = $('#search').val();
        $('#table').bootstrapTable('refresh', {
            query:
                {
                    userName: keyword
                }
        });
    })
</script>
<script src="power.js"></script>

</html>